<template>
  <div class="q-pa-md">
    <t-btn label="Menu" color="primary">
      <t-menu>
        <t-list dense style="min-width: 100px">
          <t-item clickable v-close-popup>
            <t-item-section>Open...</t-item-section>
          </t-item>
          <t-item clickable v-close-popup>
            <t-item-section>New</t-item-section>
          </t-item>
          <t-separator />
          <t-item clickable>
            <t-item-section>Preferences</t-item-section>
            <t-item-section side>
              <t-icon name="keyboard_arrow_right" />
            </t-item-section>

            <t-menu anchor="top end" self="top start">
              <t-list>
                <t-item v-for="n in 3" :key="n" dense clickable>
                  <t-item-section>Submenu Label</t-item-section>
                  <t-item-section side>
                    <t-icon name="keyboard_arrow_right" />
                  </t-item-section>
                  <t-menu auto-close anchor="top end" self="top start">
                    <t-list>
                      <t-item v-for="n in 3" :key="n" dense clickable>
                        <t-item-section>3rd level Label</t-item-section>
                      </t-item>
                    </t-list>
                  </t-menu>
                </t-item>
              </t-list>
            </t-menu>
          </t-item>
          <t-separator />
          <t-item clickable v-close-popup>
            <t-item-section>Quit</t-item-section>
          </t-item>
        </t-list>
      </t-menu>
    </t-btn>
  </div>
</template>
